페이지 레이아웃

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요

페이지 레이아웃은 텍스트와 이미지를 효과적으로 배치하여 정보를 전달하고 시각적 매력을 높이는 기술이다. 초기에는 수작업으로 이루어졌으며, 활판 인쇄술과 핫 메탈 조판을 거쳐 오프셋 인쇄와 페이스트업 시대를 맞이했다. 컴퓨터의 발달로 데스크톱 출판(DTP)이 등장하여 레이아웃 과정이 디지털화되었고, 현재는 웹 디자인, 프레젠테이션 디자인, 모바일 환경 디자인 등 다양한 분야에서 활용된다. 페이지 레이아웃은 열, 여백, 이미지, 색상, 타이포그래피 등 다양한 구성 요소를 활용하며, 그리드 시스템, 정적/동적 레이아웃, 템플릿, 부동 블록 등의 기술을 사용한다.

더 읽어볼만한 페이지

책 예술 - 페이지 번호 매기기
페이지 번호 매기기는 책의 페이지에 숫자를 부여하는 방식으로, 근대 인쇄술 발전과 함께 등장하여 책의 내부 질서를 체계화하는 데 기여하며, 전자책에서는 위치 번호를 사용하기도 한다.
페이지 레이아웃 - 쪽
쪽은 라틴어에서 유래된 단어로 쓰여진 페이지, 잎, 시트를 의미하며, 영어권에서는 다양한 관용구로 사용되고, 도서관학 및 전자 매체에서 책의 물리적 특성 또는 웹 페이지와 같은 개념을 설명하는 데 사용된다.
페이지 레이아웃 - 여백 (타이포그래피)
여백은 텍스트의 가독성과 미학을 위해 문자를 배치하는 중요한 방법이며, 고대 이집트에서 시작하여 디지털 환경에 이르기까지 다양한 형태로 변화해 왔다.
커뮤니케이션 디자인 - 크리에이티브 디렉터
크리에이티브 디렉터는 광고, 패션, 게임, 영화, 음악 등 다양한 분야에서 아이디어를 기획하고 실행하며 팀을 이끄는 역할을 한다.
커뮤니케이션 디자인 - 광고 캠페인
광고 캠페인은 조직이 제품이나 서비스를 홍보하기 위해 사용하는 일련의 마케팅 활동이며, 통합 마케팅 커뮤니케이션을 통해 타겟 시장에 도달하고 브랜드 인지도를 높이는 전략을 활용한다.

페이지 레이아웃
기본 정보
정의	페이지 레이아웃(page layout)은 디자인의 한 부분으로, 페이지 상의 시각적 요소들의 배열을 다룸.
설명	페이지 레이아웃은 시각 예술의 한 종류임. 광고에서 잡지에 이르기까지 광범위하게 사용됨. 그래픽 디자인, 편집 디자인, 웹 디자인과 밀접한 관련이 있음.
목표	주요 목표는 시각적 계층 구조를 만들어 페이지에서 특정 순서로 읽히도록 하는 것임. 이는 독자의 주의를 끄는 데 도움이 됨.
역사
유래	페이지 레이아웃은 활자 인쇄술의 발명에서 유래되었으며, 책, 신문, 잡지와 같은 인쇄 매체의 발전에 중요한 역할을 함. 초기 페이지 레이아웃은 주로 텍스트와 간단한 삽화로 구성되었지만, 기술의 발전과 함께 더욱 복잡하고 다양한 레이아웃이 등장하게 됨.
발전	20세기 초반에는 바우하우스와 같은 디자인 운동의 영향을 받아 기능적이고 합리적인 레이아웃이 강조되었음. 이후 모더니즘 디자인 사조는 페이지 레이아웃에 큰 영향을 미치며, 간결하고 명확한 시각적 표현을 추구함.
현대	현대에는 컴퓨터와 디자인 소프트웨어의 발전으로 더욱 다양한 레이아웃 기법이 가능해졌으며, 디지털 매체에서의 페이지 레이아웃은 사용자 경험(UX)과 상호작용을 고려하여 디자인되고 있음. 웹 디자인에서는 반응형 디자인(responsive design)을 통해 다양한 기기 환경에 최적화된 레이아웃을 제공하는 것이 중요해짐.
레이아웃의 요소
그리드 시스템	페이지를 가로와 세로로 나누어 시각적 요소를 정렬하고 구성하는 데 사용되는 구조임. 그리드 시스템은 일관성 있고 체계적인 레이아웃을 만드는 데 도움을 줌.
타이포그래피	텍스트의 글꼴, 크기, 간격 등을 조절하여 시각적 효과를 높이고 가독성을 향상시키는 요소임. 효과적인 타이포그래피는 메시지를 명확하게 전달하고 독자의 관심을 유도함.
이미지와 일러스트레이션	시각적 흥미를 유발하고 내용을 보충하는 데 사용됨. 이미지와 일러스트레이션은 텍스트와 함께 조화롭게 배치되어야 함.
색상	전체적인 분위기를 조성하고 특정 요소를 강조하는 데 사용됨. 색상은 브랜드 아이덴티티를 강화하고 독자의 감정을 자극하는 데 중요한 역할을 함.
여백	텍스트와 이미지 주변의 빈 공간으로, 시각적 균형을 유지하고 가독성을 높이는 데 필수적임. 적절한 여백은 독자의 집중력을 향상시키고 편안한 시각적 경험을 제공함.
레이아웃의 원칙
균형	페이지의 시각적 요소들이 균등하게 분배되어 안정감을 주는 원칙임. 균형은 대칭적 또는 비대칭적으로 구현될 수 있음.
대비	서로 다른 시각적 요소들을 사용하여 강조 효과를 주는 원칙임. 대비는 색상, 크기, 형태 등을 통해 구현될 수 있음.
비례	요소들의 크기 비율을 조절하여 시각적 중요도를 나타내는 원칙임. 비례는 전체적인 조화를 이루는 데 중요한 역할을 함.
리듬	시각적 요소들의 반복적인 배열을 통해 시각적 흐름을 만드는 원칙임. 리듬은 독자의 시선을 자연스럽게 유도함.
통일성	페이지 내의 모든 요소들이 일관된 스타일과 디자인을 유지하여 전체적인 조화를 이루는 원칙임. 통일성은 브랜드 아이덴티티를 강화하고 메시지를 명확하게 전달하는 데 기여함.
활용 분야
인쇄 매체	책, 잡지, 신문 등의 인쇄 매체에서 페이지 레이아웃은 내용 전달의 효율성을 높이고 시각적 매력을 더하는 데 중요한 역할을 함. 편집 디자인은 페이지 레이아웃의 핵심 요소임.
웹 디자인	웹 페이지와 모바일 앱의 레이아웃은 사용자 경험(UX)을 최적화하고 정보 접근성을 높이는 데 중요한 역할을 함. 웹 디자인에서는 반응형 디자인과 같은 기술을 활용하여 다양한 기기 환경에 적합한 레이아웃을 제공함.
광고 디자인	광고 매체에서 페이지 레이아웃은 시선을 사로잡고 메시지를 효과적으로 전달하는 데 중요한 역할을 함. 광고 디자인에서는 시각적 요소들의 배치와 색상, 타이포그래피 등을 전략적으로 활용함.
프레젠테이션 디자인	프레젠테이션 자료의 레이아웃은 발표 내용을 명확하게 전달하고 청중의 이해를 돕는 데 중요한 역할을 함. 프레젠테이션 디자인에서는 간결하고 시각적으로 매력적인 레이아웃이 선호됨.
관련 용어
편집 디자인	출판물의 시각적 요소를 구성하는 디자인 분야.
시각 디자인	시각적 요소를 사용하여 정보를 전달하고 소통하는 디자인 분야.
그래픽 디자인	시각적 요소를 사용하여 메시지를 전달하고 문제를 해결하는 디자인 분야.
웹 디자인	웹 사이트의 시각적 디자인과 사용자 인터페이스를 설계하는 분야.
참고 문헌
서적	송민정, 레이아웃의 모든 것, 예경, 2006.

2. 역사

페이지 레이아웃의 역사는 크게 필사본 시대, 활판 인쇄술 시대, 페이스트업 시대, 컴퓨터 기반 출판(DTP) 시대, 디지털 미디어 시대로 구분할 수 있다.

필사본 시대에는 모든 요소를 수작업으로 제작했기 때문에 제작자가 직접 레이아웃을 결정했다. 목판 인쇄의 경우에도 모든 요소가 나무에 새겨졌다.^[3]

활판 인쇄술 시대에는 조판공이 조판기를 사용하여 문자를 조립하고 갤리(긴 트레이)를 만드는 방식으로 레이아웃을 구성했다.^[3] 1884년 핫 메탈 조판의 발명은 작업자가 키보드를 사용하여 슬러그(전체 텍스트 라인)를 생산할 수 있도록 하여 조판 과정을 가속화했다.

오프셋 인쇄는 이미지의 밝고 어두운 영역을 인쇄기에서 잉크 배치 제어를 통해 조절할 수 있게 하였다. 페이스트업 방식은 이미지와 텍스트를 종이에 붙여 카메라 레디 상태로 만들었다. 1945년에 발명된 사진 식자는 문자를 사진 네거티브로 촬영하는 방식으로, 이후 컴퓨터 작동 모델은 텍스트를 자기 테이프에 저장할 수 있었다.

컴퓨터 기반 출판(DTP) 시대에는 어도비 인디자인^[5], 클라우드 기반 마크^[6] 등의 소프트웨어를 통해 레이아웃을 화면에서 처리할 수 있게 되었다. 컴퓨터 직접 제판 기술은 필름 촬영 없이 디지털 파일을 인쇄소로 전송한다.

개인용 컴퓨터의 등장과 함께 페이지 레이아웃 기술은 전자 매체로도 확장되었다. 전자책, PDF 문서, 정적인 웹 페이지는 종이 문서와 비교적 비슷하지만, 컴퓨터는 멀티미디어 애니메이션과 상호 작용성을 추가할 수 있다. 웹 페이지는 HTML, CSS, JavaScript를 사용하며, 웹 개발자와 웹 디자이너가 제작한다.

프레젠테이션 프로그램은 디지털 프레젠테이션 레이아웃을 가능하게 했으며, 현대에는 비디오 프로젝터, 컴퓨터 모니터, 대형 스크린 텔레비전을 통해 주로 표시된다.

2. 1. 필사본 및 초기 인쇄

필사본의 경우 모든 요소가 손으로 추가되므로 제작자가 작업을 만들면서 직접 레이아웃을 결정할 수 있으며, 아마도 고급 스케치를 지침으로 사용할 수 있다.^[3]

고대 목판 인쇄의 경우 페이지의 모든 요소가 나무에 직접 새겨졌지만, 인쇄물이 여러 블록 인쇄로 대형 천과 같은 더 큰 작품으로 옮겨진 경우 나중에 레이아웃 결정을 내려야 할 수도 있다.

2. 2. 활판 인쇄술

필사본은 모든 요소를 손으로 추가했기 때문에 제작자가 직접 레이아웃을 결정할 수 있었다. 반면, 르네상스 시대에 발명된 활판 인쇄와 냉금속 조판은 조판공이 조판기를 사용하여 문자를 물리적으로 조립하고 갤리(긴 트레이)를 만드는 방식으로 레이아웃을 구성했다.^[3] 모든 이미지는 조각으로 만들어졌다.

레이아웃 아티스트가 아닌 다른 사람이 조판을 하는 경우, 원래 문서는 손으로 쓴 원고에 글꼴, 글자 크기 등에 대한 지침과 함께 마크업이 추가되었다. 첫 번째 조판이 완료된 후에는 교정쇄를 인쇄하여 교정을 보았다. 최종 레이아웃은 텍스트와 이미지를 원하는 대로 배치하기 위해 나무 또는 금속 조각("가구")을 사용하여 "틀" 또는 "forme"으로 구성되었고, 체이스라고 알려진 프레임과 쐐기라고 알려진 프레임을 고정하는 객체로 구성되었다. 이 과정을 임포지션이라고 하며, 나중에 접고 다듬을 수 있는 동일한 종이에 인쇄할 여러 페이지를 정렬하는 것을 포함할 수 있었다.

1884년 핫 메탈 조판의 발명은 작업자가 키보드를 사용하여 슬러그(전체 텍스트 라인)를 생산할 수 있도록 하여 조판 과정을 가속화했다. 슬러그는 조판 기계로 임시 조립된 몰드에 녹은 금속을 부어 만든 것이었다. 그러나 레이아웃 프로세스는 냉금속 활자와 동일하게 물리적 갤리에 조립되었다.

2. 3. 페이스트업 시대

오프셋 인쇄는 이미지의 밝고 어두운 영역을 인쇄기에서 잉크 배치 제어를 통해 조절할 수 있게 하여, 종이에 페이지의 단일 사본을 만들고 사진을 찍어 얼마든지 많은 사본을 인쇄할 수 있게 하였다. 활자는 타자기로 설정하거나, 활판 인쇄와 비슷한 전문적인 결과를 얻기 위해 IBM Selectric Composer와 같은 특수 조판기를 사용하여 다양한 크기, 글꼴(비례 글꼴 포함) 및 텍스트 정렬을 구현할 수 있었다. 사진 식각 및 하프톤을 사용하면 수작업으로 만든 조각 대신 실제 사진을 인쇄물로 직접 전송할 수 있었다.

편집자들이 1977년 서베를린에서 ''빌트'' 신문의 한 호를 제작하는 모습. 이전 표지들이 그들 뒤 벽에 붙어있다.

이후 레이아웃 과정은 페이스트업을 만드는 작업이 되었는데, 이는 고무 시멘트나 다른 접착제를 사용하여 이미지와 텍스트 열을 뻣뻣한 종이 시트에 물리적으로 붙여 넣었기 때문에 붙여진 이름이다. 완성된 페이지는 카메라 레디, "메커니컬" 또는 "메커니컬 아트"로 알려졌다.

사진 식자는 1945년에 발명되었다. 키보드 입력을 거친 후 문자는 하나씩 사진 네거티브로 촬영되었으며, 이는 인쇄소로 직접 보내거나 페이스트업을 위해 사진 용지에 촬영할 수 있었다. 이러한 기계는 점점 더 정교해졌으며, 컴퓨터로 작동하는 모델은 텍스트를 자기 테이프에 저장할 수 있었다.

2. 4. 컴퓨터 기반 출판 (DTP)

컴퓨터의 그래픽 성능 향상으로 문자와 시그니처를 직접 렌더링하게 되었다. 1997년 평면 스크린 모니터(LCD, LED, OLED)의 출현으로 이전 음극선관 디스플레이의 왜곡 문제가 해결되었다.^[4]

프린터를 통해 문서를 인쇄하거나 미니그래프, 복사기로 복사할 수 있는 원본을 만들 수 있게 되었다. WYSIWYG 워드 프로세서로 일반 사용자도 정교한 페이지 레이아웃, 텍스트 정렬, 다양한 글꼴 사용이 가능해졌다. 잉크젯 프린터와 레이저 프린터의 등장으로 고품질 인쇄가 가능해져 사진 식자기를 대체했다.

어도비 인디자인(Adobe InDesign)^[5], 클라우드 기반 마크(Marq)^[6] 등 데스크톱 출판 소프트웨어로 레이아웃 프로세스를 화면에서 처리할 수 있다. 완성된 문서는 (프린터가 충분히 크다면) 바로 인쇄할 수 있다. 회색조 이미지는 디지털 방식으로 하프톤 처리하거나 인쇄소에서 삽입한다. 컴퓨터 직접 제판 기술을 사용하면 필름 촬영 없이 인쇄소로 디지털 전송하여 인쇄할 수 있다. PostScript, PDF(Portable Document Format)는 디지털 전송 표준 파일 형식이 되었다.

2. 5. 디지털 미디어 시대

개인용 컴퓨터의 등장으로 페이지 레이아웃 기술은 인쇄 매체뿐만 아니라 전자 매체로도 확장되었다. 전자책, PDF 문서, 정적인 웹 페이지는 종이 문서와 비교적 비슷하지만, 컴퓨터는 멀티미디어 애니메이션과 상호 작용성을 추가할 수 있다. 상호 작용 미디어의 페이지 레이아웃은 인터페이스 디자인 및 사용자 경험 디자인과 겹치며, 상호 작용 "페이지"는 그래픽 사용자 인터페이스(GUI)로 더 잘 알려져 있다.

현대 웹 페이지는 일반적으로 콘텐츠와 구조를 위해 HTML을, 표현 세부 사항(타이포그래피, 간격 등)을 제어하기 위해 CSS를, 상호 작용을 위해 JavaScript를 사용한다. 이러한 언어들은 모두 텍스트 기반이므로, 텍스트 편집기나 WYSIWYG 기능 또는 기타 보조 기능을 갖춘 특수 HTML 편집기에서 작업할 수 있다. Macromedia Flash와 같은 기술은 멀티미디어 콘텐츠에 사용될 수 있다. 웹 개발자는 이러한 기술로 완성된 문서를 만드는 일을 담당하고, 웹 디자이너는 레이아웃 설정을 담당할 수 있다.

발표나 엔터테인먼트에 사용되는 프로젝션 슬라이드는 인쇄된 페이지와 비슷한 레이아웃 고려 사항을 갖는다.

1980년대에는 컴퓨터 프레젠테이션 프로그램이 출시되어 프레젠테이션을 디지털 방식으로 레이아웃할 수 있게 되었다. 컴퓨터로 개발된 프레젠테이션은 레이저 프린터로 투명도에 인쇄하거나, 슬라이드로 전송하거나, LCD 오버헤드 프로젝터를 사용하여 직접 투사할 수 있었다. 현대 프레젠테이션은 주로 비디오 프로젝터, 컴퓨터 모니터, 대형 스크린 텔레비전을 통해 디지털 방식으로 표시된다.

프레젠테이션 레이아웃은 인쇄 문서와는 약간 다른 과제를 제시한다.

3. 구성 요소

페이지 레이아웃은 스타일 가이드에 의해 규정될 수 있으며, 이는 특정 데스크톱 출판 템플릿에서 구현될 수 있다. 레이아웃 작업은 페이지 매김 양에 비해 상대적으로 적을 수 있다(그림이 없는 소설 등).

일반적인 페이지 레이아웃에는 다음과 같은 결정 사항들이 포함된다.

열과 거터(열 사이 간격)의 수와 크기
의도적인 여백 배치
이미지 및 그림의 크기와 위치
페이지 여백 크기
강조를 위한 컬러 인쇄 또는 별색 사용
이미지 위에 텍스트 겹쳐쓰기, 런어라운드 및 돌출, 이미지의 페이지 여백 블리딩과 같은 특수 효과

레이아웃될 특정 요소는 다음과 같다.

주요 텍스트 흐름에서 벗어난 정보를 제공하는 Boxout 및 사이드바
장 또는 절 제목, 헤드라인, 부제
이미지 캡션
주(각주, 미주), 학술 저널이나 교과서의 참고 문헌
페이지 머리글, 페이지 바닥글 (일반적으로 내용 페이지 전체에서 균일하며, 레이아웃 소프트웨어에서 자동 복제). 페이지 번호는 보통 머리글이나 바닥글에 포함되며 소프트웨어에서 자동 증가.
풀 인용구, 넛 그래프 (단편 소설을 레이아웃에 맞게 만들기 위해 추가 가능)
목차

신문 제작에서 스토리에 첨부될 사진의 최종 선택과 자르기는 레이아웃 편집자(사진 선택이 필요한 영역 모양을 결정하고 나머지 레이아웃에 영향) 또는 별도 사진 편집자가 담당할 수 있다. 헤드라인 역시 레이아웃 편집자, 교정 편집자 또는 원저자가 작성할 수 있다.

스토리를 최종 레이아웃에 맞추기 위해, 레이아웃 편집자는 비교적 중요하지 않은 내용을 간결하게 바꿔 쓰거나 타이포그래피 요소(글꼴 크기, 자간 등)를 약간 조정할 수 있다.

3. 1. 타이포그래피

타이포그래피는 의사소통 수단으로서 메시지 전달에 있어 레이아웃의 가장 중요한 요소 중 하나이다. 서체, 글줄의 넓이, 낱말 간격, 강조, 가독성 등을 고려하여 독자들에게 더 쉬운 정보 전달을 돕는다. 글 내용에 따라 알맞은 서체와 크기를 선택하는 것이 중요하며, 차이를 줌으로써 글의 중요도와 순서를 나타낼 수 있다. 현대의 타이포그래피는 이미지, 타입, 색상, 레이아웃, 도형 등 디자인과 관련한 모든 요소를 포함한다. 한 지면에 다양한 서체를 사용하거나 행간과 자간의 변화를 주어 개성을 표현하기도 한다.

3. 1. 1. 낱자 및 낱말

자음과 모음을 따로 사용해 색상을 부여하여 리듬감을 부여하거나, 대문자와 소문자를 선택해 지면 내용의 성격을 나타내거나, 글의 내용을 고려하여 서체를 선택해 특징을 나타내는 등 자폭, 자간, 어간, 무게, 서체, 대소문자 등을 고려하여 지면의 강조, 내용 전달, 지면의 인상을 결정할 수 있다.

3. 1. 2. 행과 문단

행의 길이가 길어지면 독자가 부담스럽고 지루해하며 다음 행을 찾기에 어려움을 느낄 수 있다. 반면 너무 짧은 행폭도 빈번한 시선의 좌우 운동을 유도해 혼란을 준다. 서체 종류에 따라 행간의 차이를 주어야 하며 지나치게 좁은 행간은 답답함을 주어 가독성을 떨어뜨린다. 일반적으로 세리프(명조) 서체보다 산세리프(고딕) 서체가 더 넓은 행간을 필요로 한다. 독자의 이해를 돕기 위해 문단은 명확히 구분되어야 하며 딩벳, 이니셜, 색상 등의 방법들이 있다.^[7]

3. 1. 3. 정렬

정렬은 다른 디자인 요소와 어울릴 수 있도록 텍스트 박스 안에 글자들을 배치하는 작업이다. 텍스트의 양, 느낌, 형태, 가독성 등을 고려하여 지면 내용과 형식에 맞게 양끝, 왼쪽, 오른쪽, 중앙, 비대칭 정렬 등을 사용한다.^[1]

3. 2. 이미지

이미지는 글의 내용과 기능을 보완해주는 역할을 하는 동시에 독자의 시선을 집중시켜 본문과 다른 구성 요소에 관심과 흥미를 갖도록 유도한다. 또한 이미지를 통해 독자들에게 글의 내용을 상기시키는 역할을 한다.^[10] 이미지는 크게 사진과 일러스트로 분류할 수 있는데, 사진은 글의 중요한 내용을 분명하고 쉽게 전달되게 돕는 역할을 한다. 사실적인 방법으로 의미를 전달하는 사진과 다르게 일러스트는 풍자적 표현, 만화적 표현, 시점을 다양하게 사용하는 등 상상력을 통해 지면에 개성을 부여할 수 있다.^[10]

3. 3. 여백

여백은 독자에게 정보를 더 쉽게 받아들이게 하고, 편집자와 디자이너가 의도한 공간은 독자의 시선을 집중시키는 역할을 한다. 다른 요소로만 가득 찬 지면은 답답하고 산만하게 만들어 시선을 분산시키고 읽고 싶지 않게 할 수 있다. 적절한 여백은 눈을 편안하게 하고 각 요소의 주목도를 높여준다. 여백과 다른 구성 요소가 균형을 이룰 때 전체적인 지면이 통일되어 보인다.^[11]

3. 4. 색상

색상은 지면의 중요도를 구분하고 정돈하여 가독성을 높여준다. 다른 요소와 색상을 동일하게 사용하여 통일감을 주거나, 단색(원톤)으로 차분하고 안정된 분위기를 연출할 수 있다. 적색 계열의 색상은 강하고 세찬 느낌을^[12], 세피아와 검정 색상은 차분한 느낌을 주는 등 색상을 이용해 분위기를 표현하기도 한다^[13]. 다양한 배색을 통해 구성 요소들의 관계를 만들어 하나로 묶어주고 지면 전체의 통일성을 부여한다. 밋밋했던 지면에 개성을 부여하여 생동감과 율동감을 느낄 수 있게 한다.

4. 그리드 시스템

그리드는 타이포그래피, 사진, 일러스트 등 레이아웃 요소들의 질서를 갖춰주고 통일감을 부여하는 도구로, 지면에 보이지 않는 수직, 수평의 격자를 말한다.^[14] 1950년 디자인 요소들을 수학적인 그리드에 맞춰 비대칭적으로 구성하는 특징을 가진 국제 타이포그래픽 양식에서 발생하였으며, 오늘날 타이포그래피에 많은 영향을 주고 있다.^[15] 그리드는 공간을 체계적으로 분할하여 독자에게 지면의 통일성과 정보를 명확하게 나타내주고 안정감을 느끼게 한다. 그리드를 사용함으로써 제작 과정의 시간과 비용이 단축되는 장점이 있다.

5. 레이아웃 기술 및 방식

필사본은 제작자가 직접 레이아웃을 결정하며, 고급 스케치를 지침으로 사용할 수 있었다.^[3] 목판 인쇄에서는 페이지의 모든 요소를 나무에 새겼지만, 인쇄물을 여러 블록 인쇄로 더 큰 작품에 옮길 때는 나중에 레이아웃을 결정해야 했다.

르네상스 시대에 발명된 활판 인쇄와 냉금속 조판에서는 조판기를 사용하여 문자를 물리적으로 조립하여 갤리를 만들었다. 모든 이미지는 조각으로 제작되었다. 원고에는 글꼴, 글자 크기 등에 대한 지침과 함께 마크업이 추가되었다. 1860년대에 타자기가 사용된 후에도 마크업 과정은 동일했다.

교정쇄는 교정을 통해 원본 및 조판 오류를 확인하기 위해 인쇄되었다. 최종 레이아웃은 텍스트와 이미지를 원하는 대로 배치하기 위해 나무 또는 금속 조각("가구")을 사용하여 "틀" 또는 "forme"으로 구성되었으며, 체이스와 쐐기로 고정되었다. 이 과정을 임포지션이라고 하며, 여러 페이지를 정렬하는 것을 포함할 수 있다. "임포지션 교정"은 최종 배치를 확인하기 위해 생성될 수 있었다.

1884년 핫 메탈 조판의 발명으로 슬러그(텍스트 라인 전체)를 생산하여 조판 과정이 가속화되었으나, 레이아웃 프로세스는 냉금속 활자와 동일하게 유지되었다.

오프셋 인쇄는 이미지의 밝고 어두운 영역이 잉크 배치를 제어할 수 있게 하였다. 타자기나 특수 조판기로 활자를 설정할 수 있었고, 사진 식각 및 하프톤을 통해 실제 사진을 인쇄물로 전송할 수 있었다.

레이아웃 과정은 페이스트업을 만드는 작업이었는데, 이미지와 텍스트 열을 종이 시트에 물리적으로 붙여서 만들어졌다. 완성된 페이지는 카메라 레디, "메커니컬" 또는 "메커니컬 아트"로 알려졌다.

사진 식자는 1945년에 발명되었다. 문자는 사진 네거티브로 촬영되었으며, 인쇄소로 직접 보내거나 페이스트업을 위해 사진 용지에 촬영되었다. 컴퓨터 작동 모델은 텍스트를 자기 테이프에 저장할 수 있었다.

컴퓨터 그래픽 성능 향상으로 문자, 열, 페이지 등을 직접 렌더링할 수 있게 되었다. 음극선관은 사진 식자용 텍스트 렌더링에도 사용되었으나, 화면 가장자리에서 왜곡이 발생했다. 1997년 평면 스크린 모니터(LCD, LED, OLED)의 출현으로 왜곡 문제가 해결되었고, 평판 디스플레이가 CRT 디스플레이를 대체했다.^[4]

프린터를 통해 문서를 직접 인쇄하거나 복사기로 복사할 수 있었다. WYSIWYG 워드 프로세서로 정교한 레이아웃, 텍스트 정렬, 다양한 글꼴 사용이 가능해졌다. 잉크젯 프린터와 레이저 프린터는 충분한 품질의 인쇄물을 생산하여 사진 식자기를 대체했다.

어도비 인디자인(Adobe InDesign)^[5], 클라우드 기반 마크(Marq)^[6]와 같은 데스크톱 출판 소프트웨어로 레이아웃 프로세스를 화면에서 수행할 수 있다. 완성된 문서는 바로 인쇄하거나 디지털 방식으로 전송할 수 있으며, 컴퓨터 직접 제판 기술로 물리적 원본을 생략할 수 있다. PostScript, PDF(Portable Document Format)는 디지털 전송 표준 파일 형식이 되었다.

5. 1. 정적 레이아웃과 동적 레이아웃

웹 디자인에서 고정 폭 레이아웃이라고도 하는 고정 레이아웃은 미학을 더 잘 제어할 수 있으며, 불규칙한 모양의 콘텐츠 주변과 겹치는 공간을 철저하게 최적화할 수 있다.^[4] 모든 래스터 이미지 형식은 사실상 고정 레이아웃이지만, 고정 레이아웃은 그래픽에서 텍스트를 분리하여 검색 가능한 텍스트를 포함할 수 있다.

반대로, 전자 페이지는 콘텐츠 교환, 스타일 개인화, 텍스트 크기 조정, 이미지 크기 조정, 또는 유동적 또는 가변 레이아웃이라고도 하는 가변 페이지 크기의 재배치 가능한 콘텐츠를 포함하는 동적 레이아웃을 허용한다.^[4] 동적 레이아웃은 콘텐츠에서 프레젠테이션을 분리할 가능성이 더 높다. 동적 레이아웃은 모든 텍스트와 이미지를 행과 열의 직사각형 영역에 배치하며, 이러한 영역의 너비와 높이는 사용 가능한 화면의 백분율로 정의되므로 다양한 화면 크기에 반응한다. 화면 크기 조정 및 하드웨어 제한 모두에서 항상 최적으로 적응하면서 사용 가능한 공간을 최대한 활용할 수 있다. 텍스트는 주어진 레이아웃의 비율을 방해하지 않으면서 사용자의 개별적인 가독성 요구 사항을 충족하도록 자유롭게 크기를 조정할 수 있다. 이 방식으로 화면의 콘텐츠 전체 배열은 항상 원래 설계된 대로 유지될 수 있다.

고정 레이아웃 디자인은 더 많은 그래픽 디자인과 시각 예술 기술이 필요할 수 있으며, 동적 레이아웃 디자인은 콘텐츠 변동을 철저히 예측하기 위해 더 많은 인터랙티브 디자인 및 콘텐츠 관리 기술이 필요할 수 있다.^[4]

5. 2. 템플릿과 그리드

그리드와 템플릿은 웹사이트를 포함한 광고 캠페인 및 여러 페이지로 구성된 출판물에서 사용되는 페이지 레이아웃 디자인 패턴이다.

'''그리드'''는 페이지의 요소를 정렬하고 반복하기 위한 일련의 지침으로, 디자인 과정에서 볼 수 있지만 최종 사용자에게는 보이지 않는다. 페이지 레이아웃은 시리즈의 디자인 스타일에 따라 반복 또는 다양성이 얼마나 필요한지에 따라 해당 지침을 따르거나 따르지 않을 수 있다. 그리드는 유연성을 갖도록 설계되었다. 페이지에서 요소를 레이아웃하기 위해 그리드를 사용하는 것은 그리드를 디자인하는 데 필요한 그래픽 디자인 기술만큼이나 많은 기술이 필요할 수 있다.

반면에 '''템플릿'''은 더 엄격하다. 템플릿은 주로 최종 사용자에게 보이는 반복되는 요소를 포함한다. 템플릿을 사용하여 요소를 레이아웃하는 것은 일반적으로 템플릿을 디자인하는 데 필요한 그래픽 디자인 기술보다 적은 기술이 필요하다. 템플릿은 배경 요소의 최소한의 수정과 전경 콘텐츠의 빈번한 수정(또는 교체)에 사용된다.

대부분의 데스크톱 출판 소프트웨어는 지정된 동일한 수평 및 수직 거리에 배치된 색상 선 또는 점으로 채워진 페이지 형태로 그리드를 허용한다. 문서 전체에서 전역적으로 사용할 자동 여백 및 책자 척추(가름선) 선을 지정할 수 있다. 여러 개의 추가 수평 및 수직선을 페이지의 임의 지점에 배치할 수 있다. 최종 사용자에게 보이지 않는 모양은 페이지 레이아웃 및 인쇄 처리를 위한 지침으로 페이지에 배치할 수도 있다. 소프트웨어 템플릿은 템플릿 데이터 파일을 복제하거나 여러 페이지 문서의 마스터 페이지 기능을 사용하여 구현된다. 마스터 페이지에는 그리드 요소와 머리글 및 바닥글 요소, 자동 페이지 번호 매기기, 자동 목차 기능과 같은 템플릿 요소가 모두 포함될 수 있다.

5. 3. 부동 블록 (Floating Block)

부동 블록은 텍스트의 주 흐름에서 벗어나 정렬되지 않은 그래픽, 텍스트, 표 등을 의미한다. 학술 글쓰기 및 기술 글쓰기에서 주로 사용되며, 표나 그림을 제시할 때 쓰인다. 부동 블록은 내용에 대한 설명이 있는 캡션이나 제목, 본문에서 그림을 참조하는 데 사용되는 번호로 표시된다.^[7]

일반적으로 부동 블록은 '그림'(그림, 다이어그램, 플롯 등)과 '표' 두 가지로 나뉜다. 그림은 '이미지' 또는 '그래픽'이라고도 한다.

부동 블록은 페이지에서 고정된 위치에 있지 않고 페이지 옆으로 이동하기 때문에 '부동'이라고 불린다. 텍스트 중간에 큰 그림 등을 넣는 대신 페이지 측면에 배치하여 조판을 유연하게 하고, 내용의 흐름이 끊기지 않도록 한다.^[7]

예를 들어, 지리 관련 글에는 "그림 1: 세계 지도", "그림 2: 유럽 지도", "표 1: 대륙 인구", "표 2: 유럽 국가 인구" 등이 있을 수 있다. 일부 책에는 목차 외에 모든 그림을 나열하는 그림 목록이 있기도 하다.

다른 종류의 부동 블록도 있는데, 다음과 같다.

'''사이드바''':^[8] 주 내용에서 벗어난 내용을 다룬다. 예를 들어, 제품 사용 설명서에서 사람들이 제품을 어떻게 사용했는지 예시를 사이드바에 넣을 수 있다. '간주곡'이라고도 한다. 사이드바 (출판) 참고.
'''프로그램''': 컴퓨터 프로그래밍 관련 글에서는 코드와 알고리즘을 그림에 배치한다.
'''방정식''': 수학 관련 글에서는 주요 텍스트와 구분되는 번호가 매겨진 블록에 수학 표기법을 배치한다.

6. 현대적 응용

개인용 컴퓨터의 등장 이후 페이지 레이아웃 기술은 인쇄 매체뿐만 아니라 전자 매체로도 확장되었다. 전자책, PDF 문서, 그리고 정적인 웹 페이지는 종이 문서와 비교적 가깝게 일치하지만, 컴퓨터는 멀티미디어 애니메이션과 상호 작용성을 추가할 수 있다. 상호 작용 미디어를 위한 페이지 레이아웃은 인터페이스 디자인 및 사용자 경험 디자인과 중복되며, 상호 작용 "페이지"는 그래픽 사용자 인터페이스(GUI)로 더 잘 알려져 있다.

현대 웹 페이지는 일반적으로 콘텐츠 및 일반적인 구조를 위해 HTML을, 타이포그래피 및 간격과 같은 표현 세부 사항을 제어하기 위해 CSS를, 그리고 상호 작용을 위해 JavaScript를 사용하여 제작된다.^[1] Macromedia Flash와 같은 추가 기술은 멀티미디어 콘텐츠에 사용될 수 있다.^[1]

1800년대 강의에서는 매직 랜턴과 암실 프로젝터가 사용되었다. 1940년대에는 오버헤드 프로젝터를 사용하여 투명 필름을 프레젠테이션에 사용하는 것이 인기를 얻었으며, 1950년대에는 슬라이드 프로젝터가 사용되었다. 1980년대에는 컴퓨터 프레젠테이션 프로그램이 출시되어 프레젠테이션을 디지털 방식으로 레이아웃하는 것이 가능해졌다. 현대 프레젠테이션은 종종 비디오 프로젝터, 컴퓨터 모니터 또는 대형 스크린 텔레비전을 사용하여 디지털 방식으로 표시된다.^[1]

프레젠테이션 레이아웃은 인쇄 문서와는 약간 다른 과제를 제시한다.^[1] 고려해야 할 사항은 다음과 같다.

발표자가 말하는 내용을 반복하지 않도록 편집한다.
슬라이드를 핸드아웃으로 인쇄하거나 온라인에 게시할 경우 나중에 참조할 수 있도록 유용하게 만든다.
슬라이드가 편안한 간격으로 변경되고, 발표 길이에 맞으며, 내용 순서가 발표자의 기대와 일치하도록 한다.
발표자가 페이지의 특정 항목을 참조할 수 있는 방법을 제공한다.
텍스트 및 그래픽의 크기를 조정하여 방 뒤쪽에서도 볼 수 있도록 한다.
애니메이션을 사용하여 강조를 추가하고, 정보를 천천히 소개하거나, 즐거움을 더한다.
모든 페이지가 유사하게 느껴지도록 하거나 진행 상황을 나타내기 위해 머리글, 바닥글 또는 반복되는 요소를 사용한다.
새로운 주제나 세그먼트를 소개하기 위해 제목을 사용한다.

6. 1. 웹 디자인

개인용 컴퓨터의 등장 이후 페이지 레이아웃 기술은 인쇄 매체뿐만 아니라 전자 매체로도 확장되었다. 전자책, PDF 문서, 그리고 정적인 웹 페이지는 종이 문서와 비교적 가깝게 일치하지만, 컴퓨터는 멀티미디어 애니메이션과 상호 작용성을 추가할 수도 있다. 상호 작용 미디어를 위한 페이지 레이아웃은 인터페이스 디자인 및 사용자 경험 디자인과 중복되며, 상호 작용 "페이지"는 그래픽 사용자 인터페이스 (GUI)로 더 잘 알려져 있다.

현대 웹 페이지는 일반적으로 콘텐츠 및 일반적인 구조를 위해 HTML을, 타이포그래피 및 간격과 같은 표현 세부 사항을 제어하기 위해 CSS를, 그리고 상호 작용을 위해 JavaScript를 사용하여 제작된다.^[1] 이러한 언어는 모두 텍스트 기반이므로 이 작업은 텍스트 편집기 또는 WYSIWYG 기능 또는 기타 보조 기능을 갖춘 특수 HTML 편집기에서 수행할 수 있다.^[1] Macromedia Flash와 같은 추가 기술은 멀티미디어 콘텐츠에 사용될 수 있다.^[1] 웹 개발자는 이러한 기술을 사용하여 실제로 완성된 문서를 만드는 일을 담당하지만, 별도의 웹 디자이너가 레이아웃을 설정하는 일을 담당할 수 있다.^[1] 주어진 웹 디자이너는 유창한 웹 개발자이거나, 단순히 기술의 일반적인 기능에 익숙하고 개발 팀을 위해 원하는 결과를 시각화할 수 있다.^[1]

6. 2. 프레젠테이션 디자인

매직 랜턴과 암실 프로젝터는 1800년대 강의에서 인쇄, 타이핑, 사진, 또는 손으로 그린 원본을 사용하여 사용되었다.^[1] 두 세트의 사진 필름 (하나의 네거티브와 하나의 포지티브) 또는 하나의 반전 필름을 사용하여 빛이 통과하는 양성 이미지를 만들 수 있었다.^[1] 인터타이틀은 소리가 없을 때 초기 영화에서 광범위하게 사용되었으며, 현재는 흔한 배니티 카드 및 크레딧 외에도 가끔 사용된다.^[1]

1940년대에는 오버헤드 프로젝터를 사용하여 (불투명한 텍스트와 이미지로) 투명 필름을 프레젠테이션에 사용하는 것이 인기를 얻었으며, 1950년대에는 슬라이드 프로젝터가 사용되었다.^[1] 오버헤드 프로젝터용 투명도는 일부 복사기로 인쇄할 수 있었다.^[1] 1980년대에는 컴퓨터 프레젠테이션 프로그램이 출시되어 프레젠테이션을 디지털 방식으로 레이아웃하는 것이 가능해졌다.^[1] 컴퓨터로 개발된 프레젠테이션은 일부 레이저 프린터로 투명도에 인쇄하거나, 슬라이드로 전송하거나, LCD 오버헤드 프로젝터를 사용하여 직접 투사할 수 있었다.^[1] 현대 프레젠테이션은 종종 비디오 프로젝터, 컴퓨터 모니터 또는 대형 스크린 텔레비전을 사용하여 디지털 방식으로 표시된다.^[1]

프레젠테이션을 레이아웃하는 것은 인쇄 문서와 약간 다른 과제를 제시하며, 특히 사람이 일반적으로 말하고 프로젝션된 페이지를 참조하기 때문에 더욱 그렇다.^[1] 다음 사항을 고려할 수 있다.^[1]

발표자가 말하는 내용을 반복하여 청중이 둘 중 하나에 집중할 수 있도록 하거나, 언어적으로 전달할 수 없는 정보만 제시하여 (청중의 주의를 분산시키거나 슬라이드를 직접 읽는 것을 피하기 위해) 제시된 정보를 편집한다.^[1]
슬라이드를 핸드아웃으로 인쇄하거나 온라인에 게시할 경우 나중에 참조할 수 있도록 유용하게 만든다.^[1]
슬라이드가 편안한 간격으로 변경되고, 발표 길이에 맞으며, 내용 순서가 발표자의 기대와 일치하도록 페이싱한다.^[1]
발표자가 색상, 언어 레이블 또는 레이저 포인터와 같이 페이지의 특정 항목을 참조할 수 있는 방법을 제공한다.^[1]
텍스트 및 그래픽의 크기를 조정하여 방 뒤쪽에서도 볼 수 있도록 하여, 단일 슬라이드에 표시할 수 있는 정보의 양을 제한한다.^[1]
애니메이션을 사용하여 강조를 추가하고, 정보를 천천히 소개하거나, 즐거움을 더한다.^[1]
모든 페이지가 유사하게 느껴지도록 하거나 진행 상황을 나타내기 위해 머리글, 바닥글 또는 반복되는 요소를 사용한다.^[1]
새로운 주제나 세그먼트를 소개하기 위해 제목을 사용한다.^[1]

참조

_[1] 서적 Elements and principles of design: Tools for digital imagery, art and design 2014
_[2] 뉴스 The perils of using journalist jargon outside the newsroom https://www.theguard[...] 2023-06-25
_[3] 간행물 Le lexicon : Mise en page et mise en texte des manuscrits hébreux, grecs, latins, romans et arabes https://www.academia[...] Paris, Aedilis 2008
_[4] 문서 Flat panel display
_[5] 웹사이트 Buy Adobe InDesign CC – Desktop publishing software and online publisher http://www.adobe.com[...]
_[6] 웹사이트 Free Page Layout Software https://www.marq.com[...] 2015-05-26
_[7] 서적 New Perspectives on JavaScript and AJAX, Comprehensive https://books.google[...]
_[8] 서적 Sams Teach Yourself Dreamweaver CS5 in 24 Hours https://books.google[...]
_[9] 서적 레이아웃의 모든 것 예경 2006
_[10] 문서 위의책
_[11] 문서 위의책
_[12] 문서 위의책
_[13] 문서 위의책
_[14] 서적 그리드 안그라픽스 2014
_[15] 간행물 스위스 그래픽 양식의 포스터에 관한 연구 2003

본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com